<template>
  <el-container style="height: 500px">
    <el-header
      style="
        background-color: rgba(0, 132, 255, 0.8);
        line-height: 60px;
        color: #fff;
      "
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <i class="el-icon-orange logo"></i>
          综测评分系统
        </el-col>
        <el-col :span="8" style="text-align: right">
          {{
            userInfo.isStudentManage === 1
              ? "欢迎学生管理员 " + userInfo.studentName
              : userInfo.isStudentManage === 2
              ? "欢迎学院管理员 " + userInfo.username
              : userInfo.studentName
          }}
          <el-button type="info" @click="logout" style="color: #000"
            >退出</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="220px">
        <el-menu
          style="height: 100%"
          background-color="rgba(0,132,255)"
          text-color="#000"
          active-text-color="#ffd04b"
          router
          :default-active="activeUrl"
          unique-opened
        >
          <template v-for="item in menu">
            <el-submenu
              :index="item.path"
              v-if="item.children"
              :key="item.path"
              :disabled="
                (userInfo.isStudentManage === 1||userInfo.isStudentManage === 2) &
                (userInfo.SecondaryCollege === item.text)
                  ? false
                  : true
              "
            >
              <template #title style="color: #000"
                ><i :class="item.icon" style="color: #fff"></i
                >{{ item.text }}</template
              >
              <div :key="ite.path" v-for="ite in item.children">
                <el-submenu
                  :index="ite.path"
                  v-if="ite.children"
                  :key="ite.path"
                  :disabled="userInfo.isStudentManage === 2?false:
                    (userInfo.isStudentManage === 1) &
                    (userInfo.className === ite.text)
                      ? false
                      : true
                  "
                >
                  <template #title style="color: #000">{{ ite.text }}</template>
                  <div :key="it.path" v-for="it in ite.children">
                    <el-submenu
                      :index="it.path"
                      v-if="it.children"
                      :key="it.path"
                    >
                      <template #title style="color: #000">{{
                        it.text
                      }}</template>
                      <div :key="i.path" v-for="i in it.children">
                        <el-submenu
                          :index="i.path"
                          v-if="i.children"
                          :key="i.path"
                        >
                          <template #title style="color: #000">{{
                            i.text
                          }}</template>
                          <el-menu-item
                            :index="
                              item.path +
                              ite.path +
                              it.path +
                              i.path +
                              '/' +
                              ite.grade +
                              it.grade +
                              i.grade +
                              '第' +
                              ii.grade +
                              '学期' +
                              '?college=' +
                              item.text +
                              '&className=' +
                              ite.grade +
                              '&studentNumber=' +
                              it.studentNumber +
                              '&studentName=' +
                              it.grade +
                              '&grade=' +
                              i.grade +
                              '&Time=' +
                              ii.grade
                            "
                            v-for="ii in i.children"
                            :key="ii.path"
                            >{{ ii.text }}</el-menu-item
                          >
                        </el-submenu>
                      </div>
                    </el-submenu>
                  </div>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="item.path + ite.path + '/' + ite.grade"
                  :key="ite.path"
                  >{{ ite.text }}</el-menu-item
                >
              </div>
            </el-submenu>
            <el-menu-item :key="item.path" :index="item.path" v-else
              ><i :class="item.icon" style="color: #fff"></i
              >{{ item.text }}</el-menu-item
            >
          </template>
        </el-menu>
      </el-aside>
      <el-main style="background-color: #ccc">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import {
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
} from "element-ui";
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);

export default {
  name: "Home",

  data() {
    // const collegeList = {
    //   TheFineArts: "美术与设计学院",
    //   businessSchool: "商学院",
    //   SchoolofPoliticsandHistory: "政史学院",
    //   FacultyofEducationalSciences: "教育科学学院",
    //   SchoolofForeignLanguages: "外国语学院",
    //   PhysicalEducationInstitute: "体育学院",
    //   SchoolofLiteratureandMedia: "文学与传媒学院",
    //   AcademyofMusicandDance: "音乐舞蹈学院",
    //   CollegeofFineArtsandDesign: "美术与设计学院",
    //   SchoolofPhysicalScienceandEngineeringtechnology: "物理科学与工程技术学院",
    //   SchoolofChemistryandMaterials: "化学与材料学院",
    //   SchoolofBiologyandPharmacy: "生物与制药学院",
    //   SchoolofElectronicandCommunicationEngineering: "电子与通信工程学院",
    //   SchoolofComputerScienceandEngineering: "计算机科学与工程学院",
    //   SchoolofInternationalEducation: "国际教育学院",
    //   CollegeofContinuingEducation: "继续教育学院",
    // };
    return {
      menu: [],
      activeUrl: "/AdminManageHome",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.activeUrl = this.$router.path;
    this.getData();
  },
  // watch: {
  //   $route: {
  //     handler: function (to, oldVal) {
  //       this.activeUrl=to.path
  //     },
  //   },
  // },
  methods: {
    ...mapMutations("user", {
      logout(commit) {
        commit("logout");
        localStorage.removeItem("userInfo");
        this.$router.push("/login");
      },
    }),
    getData() {
      this.$request.get("/getClassList/getClass", {}).then(({ data }) => {
        if (data.data && data.code === 200) {
          localStorage.setItem("RouterList", JSON.stringify(data.data));
          this.menu = [
            {
              path: "/AdminManageHome",
              text: "首页",
              icon: "el-icon-s-home",
            },

            ...data.data.map((item, ind) => {
              return {
                path: "/AdminManage/" + item._id,
                text: item.SecondaryCollege,
                icon: "el-icon-s-operation",
                children: item.classList.map((ite, index) => {
                  return {
                    path: "/class" + index + item._id,
                    grade: ite.className,
                    text: ite.className,
                    children: ite.studentList.map((it, indx) => {
                      return {
                        path: "/studentName" + indx + "" + index,
                        grade: it.studentName,
                        text: it.studentName,
                        studentNumber: it.student_Number,
                        children: [
                          {
                            path: "/grade1" + indx + "" + index,
                            grade: "大一",
                            text: "大一综测表",
                            children: [
                              {
                                path: "/first",
                                grade: "一",
                                text: "第一学期",
                              },
                              {
                                path: "/second",
                                grade: "二",
                                text: "第二学期",
                              },
                            ],
                          },
                          {
                            path: "/grade2" + indx + "" + index,
                            grade: "大二",
                            text: "大二综测表",
                            children: [
                              {
                                path: "/first",
                                grade: "一",
                                text: "第一学期",
                              },
                              {
                                path: "/second",
                                grade: "二",
                                text: "第二学期",
                              },
                            ],
                          },
                          {
                            path: "/grade3" + indx + "" + index,
                            grade: "大三",
                            text: "大三综测表",
                            children: [
                              {
                                path: "/first",
                                grade: "一",
                                text: "第一学期",
                              },
                              {
                                path: "/second",
                                grade: "二",
                                text: "第二学期",
                              },
                            ],
                          },
                          {
                            path: "/grade4" + indx + "" + index,
                            grade: "大四",
                            text: "大四综测表",
                            children: [
                              {
                                path: "/first",
                                grade: "一",
                                text: "第一学期",
                              },
                              {
                                path: "/second",
                                grade: "二",
                                text: "第二学期",
                              },
                            ],
                          },
                        ],
                      };
                    }),
                  };
                }),
              };
            }),
          ];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>